<template>
  <div class="h-all flex fd-c">
    <div class="fs-20 flex nodarg ra-10 zi-9999 rel ml10 ai-c">
      <Select placeholder="版本" clear class="w-130 text-input b-0 hand fs-13 h-34" :data="['人教版PEP','外研版','牛津上海版','地方特色版本‌']" v-model="query.v"></Select>
      <Select placeholder="年级" clear class="w-100 text-input b-0 hand ml10 fs-13 h-34" :data="nianji" v-model="query.grade"></Select>
      <Select placeholder="上下册" clear class="w-90 text-input b-0 hand fs-13 ml10 h-34" :data="['上册','下册']" v-model="query.volume"></Select>
      <input class="w-300 h-34 ml10 text-input ra-5 pl10 pr10" placeholder="如：听力练习题" v-model="query.listen" type="text">
      <div @click="onStart()" class="pl15 pr15 pt5 pb6 nodarg hand bc-primary fc-fff ml15 fs-16 ra-100">生成试卷</div>
      <div @click="onStartChange()" class="pl15 pr15 pt5 pb6 nodarg hand bc-success fc-fff ml15 fs-16 ra-100">换一篇试卷</div>
      <span class="flex-1"></span>
      <div @click="startTimer(1)" class="pl15 pr15 pt5 pb6 nodarg hand bc-primary fc-fff mr15 fs-16 ra-100">开始听写 <span class="iconfont icon-bofang1"></span></div>
    </div>

    <div class="flex-1">
      <scroll>
        <div class="mt15 w-all pl10">
          <div class="w-all flex fd-c mb15" v-for="item,i in list">
            <span class=" fs-18">{{i+1}}、{{item.title}} <span style="font-weight:100" class="pl20">(<span class="pl30"></span>)</span></span>
            <div v-for="child in item.list" class="flex fd-c mt10">
              <span class="fs-17 fb ml18 fc-aa">{{child.text}}</span>
              <div class="flex ai-c mt10">
                <span v-for="v in child.options" class="ml20 fb fc-success fs-17">{{v}}</span>
              </div>
            </div>
          </div>
        </div>
      </scroll>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import yy from '@lib/mixin';
import useStore from '../../store';
const st = useStore();
const nianji = ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三'];
const historys = ref([{ role: 'system', content: `返回 JSON 格式 格式为 {exercise:[{title:'',list:[{text:'',result:'A',options:[...]}],listening:'这里面为听力原文 不要重复'},{...},... 最少10题 每题一个]} 只出选择题` }]);
const query = reactive({
  v: '人教版PEP',
  grade: "",
  volume: "",
  listen: '听力练习题',
  index: 0
})
const list = ref([]);
function startTimer() {
  // yy.spinner.show();
  let item = list.value[query.index];
  if (!item) {
    clearInterval(tts);
    yy.msg.success('听写结束');
    return;
  } else {
    st.toSpeek(`请听第${['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][query.index]}题 .${item.listening}`).then(res => {
      yy.msg.success(`请听第${['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][query.index]}题`);
      // yy.spinner.close();
      setTimeout(() => {
        startTimer();
      }, 10000);
      query.index++;
    })

  }
}
function onStart() {
  if (query.listen < 4) {
    yy.msg.error('请输入短文规则如：听力练习');
    return;
  }
  if (query.grade < 4) {
    yy.msg.error('请选择年级');
    return;
  }
  if (query.volume < 4) {
    yy.msg.error('请选择上册或下册');
    return;
  }
  let text = `${query.v} ${query.grade} ${query.volume} ${query.listen} 英语`;
  historys.value.push({ role: 'user', content: text })
  console.log(historys.value);

  yy.spinner.show({ type: 8, message: "题目生成中...", className: 'spinner' })
  st.invoke('deepseek', { list: JSON.parse(JSON.stringify(historys.value)), isJson: true }).then(res => {
    yy.spinner.close()
    console.log(res, '===========')
    list.value = JSON.parse(res).exercise
  })
}

function onStartChange() {
  historys.value.push({ role: 'user', content: '请重新换一套题目，不要与前面的一样' });
  yy.spinner.show({ type: 8, message: "题目生成中...", className: 'spinner' })
  console.log(historys.value, '换一套题目');
  
  st.invoke('deepseek', { list: JSON.parse(JSON.stringify(historys.value)), isJson: true }).then(res => {
    yy.spinner.close()
    console.log(res, '===========')
    list.value = JSON.parse(res).exercise
  })
}
</script>

<style lang='less'>
.b-0 {
  border: 0;
}
</style>